<template>
  <img src="../../static/bg.png" alt="" class="bg" />
  <div class="topSitting">头部占位</div>
  <div class="mainBtn">
    <div class="mainBtnItem" @click="bigCheck(true)">
      <div class="title" :class="isOn ? 'isOn' : ''">执行中</div>
      <img
        src="../../static/my_chulizhong.png"
        alt=""
        class="btnItemIcon"
        v-if="isOn"
      />
      <img
        src="../../static/zhixingzhong_gray_icon.png"
        alt=""
        class="btnItemIcon"
        v-if="!isOn"
      />
    </div>
    <div class="mainBtnLine"></div>
    <div class="mainBtnItem" @click="bigCheck(false)">
      <div class="title" :class="!isOn ? 'isOn' : ''">已办结</div>
      <img
        src="../../static/zhixingzhong_gray_icon.png"
        alt=""
        class="btnItemIcon"
        v-if="isOn"
      />
      <img
        src="../../static/my_chulizhong.png"
        alt=""
        class="btnItemIcon"
        v-if="!isOn"
      />
    </div>
  </div>
  <div class="mainArea">
    <div class="mainTitle">
      <img src="../../static/daban_bg.png" alt="" class="mainTitleBg" />
      <div>执行中</div>
    </div>
    <div class="mainTopSitting">主题头部占位</div>
    <div class="search">
      <up-input
        placeholder="请输入客户姓名或手机号码搜索"
        placeholderStyle="font-size:20rpx;color:#999999;"
        border="surround"
        shape="circle"
        fontSize="20rpx"
        customStyle="background:#f5f5f5;padding:8rpx 20rpx;height:28rpx"
        v-model="searchInfo"
      >
        <template #suffix> </template>
      </up-input>
    </div>
    <div class="selectArea">
      <div class="selectItem">全部<span>{8}</span></div>
      <div class="selectItem" v-if="isOn">受理调查<span>{8}</span></div>
      <div class="selectItem" v-if="isOn">人工复审<span>{8}</span></div>
      <div class="selectItem" v-if="isOn">合同签订<span>{8}</span></div>
      <div class="selectItem" v-if="isOn">合同待生效<span>{8}</span></div>
      <div class="selectItem" v-if="!isOn">申请完成<span>{8}</span></div>
      <div class="selectItem" v-if="!isOn">订单超时<span>{8}</span></div>
      <div class="selectItem" v-if="!isOn">申请拒绝<span>{8}</span></div>
    </div>
    <div class="showItem">
      <div class="userInfo">
        <div class="userName">
          <img
            src="../../static/work_icon_recomment.png"
            alt=""
            class="advantar"
          />
          <div>包子</div>
        </div>
        <div class="orderNo">订单号：<span>210421199911258888</span></div>
      </div>
      <div class="userState">
        <div class="method">线上</div>
        <div class="loanNum">200000元</div>
        <div class="loanRate">3.85%</div>
      </div>
      <div class="userPhone">
        <div class="phoneNum">
          <img src="../../static/phone.png" alt="" class="phoneIcon" />
          <div>手机号：<span>188413888888</span></div>
          <img src="../../static/phone.png" alt="" class="phoneIcon" />
        </div>
        <img src="../../static/btn1.png" alt="" class="custType" />
      </div>
      <div class="applyTime">
        <div class="applyLine"></div>
        <div class="applyText">申请时间：2022.12.12 14:30</div>
      </div>
      <div class="stepCate">受理调查</div>
      <img src="../../static/hetongqianyue_bg.png" alt="" class="stepCateBg" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
// 大按钮
const isOn = ref(true);
// 大按钮切换
const bigCheck = (e) => {
  console.log(e);
  isOn.value = e;
};
// 搜索框
const searchInfo = ref("");
</script>

<style scoped lang="scss">
.mainArea {
  margin: 42rpx 28rpx;
  background-color: #fff;
  border-radius: 16rpx;
  /** 待修改 **/
  padding-bottom: 100rpx;
  .mainTitle {
    width: 319rpx;
    height: 50rpx;
    line-height: 50rpx;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    margin-top: -12rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    .mainTitleBg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -99999;
    }
  }
  .mainTopSitting {
    height: 88rpx;
    opacity: 0;
  }
  .search {
    margin: 0 63rpx;
  }
  .selectArea {
    padding: 30rpx 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    .selectItem {
      margin: 0 15rpx;
      padding: 5rpx 15rpx;
      background-color: #fff;
      height: 28rpx;
      line-height: 28rpx;
      border-radius: 29rpx;
      color: #333333;
      background-color: #f8f8f8;
    }
  }
  .showItem {
    position: relative;
    padding: 18rpx 0;
    margin: 30rpx;
    height: 234rpx;
    background-color: #f1f2ff;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    .userInfo {
      width: 100%;
      box-sizing: border-box;
      padding: 0 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .userName {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #333333;
        font-size: 28rpx;
        .advantar {
          height: 52rpx;
          width: 52rpx;
          margin-right: 15rpx;
        }
      }
    }
    .userState {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 42rpx;
      .method {
        height: 22rpx;
        padding: 2rpx 12rpx;
        line-height: 22rpx;
        font-size: 16rpx;
        border-radius: 4rpx;
        margin-right: 15rpx;
        color: #ffb10d;
        background-color: #fff6e1;
      }
      .loanNum {
        height: 22rpx;
        padding: 2rpx 12rpx;
        line-height: 22rpx;
        font-size: 16rpx;
        border-radius: 4rpx;
        margin-right: 15rpx;
        color: #0dabff;
        background-color: #dff4ff;
      }
      .loanRate {
        height: 22rpx;
        padding: 2rpx 12rpx;
        line-height: 22rpx;
        font-size: 16rpx;
        border-radius: 4rpx;
        margin-right: 15rpx;
        color: #ff7513;
        background-color: #ffe7d6;
      }
    }
    .userPhone {
      width: 100%;
      box-sizing: border-box;
      padding: 0 30rpx 0 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .phoneNum {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 24rpx;
        color: rgba($color: #000000, $alpha: 0.65);
        .phoneIcon {
          width: 24rpx;
          height: 24rpx;
          margin: 0 10rpx;
        }
      }
      .custType {
        width: 139rpx;
        height: 48rpx;
      }
    }
    .applyTime {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .applyLine {
        width: 100%;
        height: 0;
        border-bottom: 1rpx dashed #dfdfdf;
        margin-bottom: 18rpx;
      }
      .applyText {
        font-size: 20rpx;
        color: #999;
      }
    }
    .stepCate {
      width: 94rpx;
      height: 38rpx;
      line-height: 38rpx;
      text-align: center;
      font-size: 20rpx;
      color: #fff;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 909;
    }
    .stepCateBg {
      width: 94rpx;
      height: 38rpx;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 99;
    }
  }
}
.bg {
  width: 750rpx;
  height: 863rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -99999999;
}
.topSitting {
  height: 220rpx;
  opacity: 0;
}
.mainBtn {
  margin: 0 30rpx;
  height: 120rpx;
  background-image: linear-gradient(to bottom, #ffffff, #dae4ff);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  .mainBtnItem {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .title {
      font-size: 32rpx;
      color: #666666;
    }
    .isOn {
      color: #3277f2;
    }
    .btnItemIcon {
      width: 91rpx;
      height: 91rpx;
    }
  }
  .mainBtnLine {
    width: 1rpx;
    height: 80rpx;
    background-color: #979797;
    opacity: 22%;
  }
}
</style>
